<template>
	<view class="container">
		<view class="cart-title">
			购物车
		</view>
		<view class="cart-items" v-for="(item, index) in cartItems" :key="index">
			<view class="cart-item">
				<view class="item-info">
					<view class="item-name">{{ item.name }}</view>
					<view class="item-price">价格: ¥{{ item.price }}</view>
					<view class="item-total">总价: ¥{{ item.quantity * item.price }}</view>
					<view class="item-quantity-controls">
						<button @click="decreaseQuantity(index)" :disabled="item.quantity <= 1">-</button>
						<view class="item-quantity">{{ item.quantity }}</view>
						<button @click="increaseQuantity(index)">+</button>
					</view>
				</view>
				<image class="item-image" :src="item.image" mode="aspectFill" />
			</view>
			<view class="item-divider"></view>
		</view>
		<view class="cart-footer">
			<view class="total-price">
				总价: ¥{{ totalPrice }}
			</view>
			<button @click="checkout">去结算</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartItems: [{
						name: '珍珠奶茶',
						price: 15,
						quantity: 1,
						image: '../../static/p1.png' // 假设图片路径
					},
					{
						name: '抹茶拿铁',
						price: 20,
						quantity: 2,
						image: '../../static/p2.png' // 假设图片路径
					},
					{
						name: '草莓奶昔',
						price: 18,
						quantity: 1,
						image: '../../static/p3.png' // 假设图片路径
					}
				]
			};
		},
		computed: {
			totalPrice() {
				return this.cartItems.reduce((total, item) => total + item.quantity * item.price, 0);
			}
		},
		methods: {
			increaseQuantity(index) {
				this.cartItems[index].quantity++;
			},
			decreaseQuantity(index) {
				if (this.cartItems[index].quantity > 1) {
					this.cartItems[index].quantity--;
				}
			},
			checkout() {
				uni.showToast({
					title: '前往结算页面',
					icon: 'success',
					duration: 2000,
					success: () => {
						uni.navigateTo({
							url: '/pages/checkout/checkout'
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.cart-title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.cart-items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.cart-item {
		flex: 1;
		display: flex;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	.item-image {
		width: 100px;
		height: 100px;
	}

	.item-info {
		flex: 1;
		padding: 0 20px;
	}

	.item-name {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.item-quantity-controls {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
	}

	.item-quantity-controls button {
		width: 30px;
		height: 30px;
		border: 1px solid #ddd;
		border-radius: 50%;
		background-color: #fff;
		font-size: 16px;
		margin: 0 5px;
	}

	.item-quantity {
		font-size: 18px;
		width: 40px;
		text-align: center;
	}

	.item-price,
	.item-total {
		font-size: 16px;
		color: #666;
		margin-bottom: 5px;
	}

	.item-divider {
		height: 1px;
		background-color: #ddd;
		margin: 10px 0;
	}

	.cart-footer {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.total-price {
		font-size: 18px;
		margin-bottom: 10px;
	}

	button {
		padding: 10px 20px;
		background-color: #ff6347;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
	}
</style>